/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from 'react';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import StandardTab from '@/components/StandardTab';
import PopoverInfo from '@/components/PopoverInfo';
import { useSelector } from 'dva';
import styles from '../commen.less';
import FinanceSetting from './components/Setting';
import FinanceQoute from './components/Qoute';
import Calculate from '../Calculate';

const Index = () => {
  const { key: platformKey } = useSelector(({ setting }) => setting.options);
  const isZyAccount = platformKey === 'post';

  const [activeKey, setActiveKey] = useState('setting');
  const [sourceType, setSourceType] = useState(isZyAccount ? 'setting' : 'calculate');

  const onChange = key => setActiveKey(key);
  const panes = [
    {
      tab: '驿站报价单设置',
      key: 'setting',
      component: <FinanceSetting />,
    },
    {
      tab: '报价单',
      key: 'quote',
      component: <FinanceQoute />,
    },
  ];

  const tabList = [
    {
      tab: (
        <span>
          计算运费
          <PopoverInfo>
            根据设置的报价单和订单重量，可给下属驿站计算每月订单的运费金额，
            <br />
            方便智慧快递平台管理人员查账对账；
          </PopoverInfo>
        </span>
      ),
      key: 'calculate',
      show: !isZyAccount,
    },
    {
      tab: (
        <span>
          报价单设置
          <PopoverInfo>支持设置基础运费报价单，以及给下属驿站指定报价单。</PopoverInfo>
        </span>
      ),
      key: 'setting',
      show: true,
    },
  ].filter(v => v.show);

  return (
    <PageHeaderLayout tabList={tabList} onTabChange={key => setSourceType(key)}>
      <div className={styles.main}>
        {sourceType === 'setting' ? (
          <StandardTab onChange={onChange} activeKey={activeKey} panes={panes} name="finance" />
        ) : (
          <Calculate />
        )}
      </div>
    </PageHeaderLayout>
  );
};

export default Index;
